---
title: <media-rendition-menu>
description: Media Rendition Menu
layout: ../../../../layouts/ComponentLayout.astro
source: https://github.com/muxinc/media-chrome/tree/main/src/js/media-rendition-menu.js
---

import SandpackContainer from "../../../../components/SandpackContainer.astro";

A menu for video renditions (qualities).

> Remember to add the separate menu module for the menu components.

```js
import "media-chrome";
import "media-chrome/menu";
```

### Default usage

<SandpackContainer
  editorHeight={275}
  dependencies={{ "@mux/mux-video": "latest" }}
  html={`<media-controller>
  <mux-video
    playsinline crossorigin
    slot="media"
    playback-id="Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008"
  ></mux-video>
  <media-rendition-menu hidden anchor="auto"></media-rendition-menu>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-rendition-menu-button></media-rendition-menu-button>
  </media-control-bar>
</media-controller>`}
/>

### Explicit linking

<SandpackContainer
  editorHeight={275}
  dependencies={{ "@mux/mux-video": "latest" }}
  html={`<media-controller>
  <mux-video
    playsinline crossorigin
    slot="media"
    playback-id="Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008"
  ></mux-video>
  <media-rendition-menu hidden id="menu1" anchor="menu-button1"></media-rendition-menu>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-rendition-menu-button id="menu-button1" invoketarget="menu1"></media-rendition-menu-button>
  </media-control-bar>
</media-controller>`}
/>
